<!--页面组件-->
<template>
  <div style="background-image: url(/img/background.png)">
    <div class="tempxyz tableHeight systemFooter">
      <CCard>
        <CCardHeader>
          <strong class="headerFont">风险监测</strong>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 100px); margin-top: 30px;overflow: hidden;">
            <div class="riskStyle">
              <div class="disasterStyle">
                <div content="冰凌">
                  <img
                    src="@/assets/icons/dotpage/ice.png"
                    alt="冰凌"
                    style="margin-right: 200px"
                    @click="getDetails(5)"
                  />
                  <p style="font-size:20px;margin-right: 200px;">海冰/冰凌</p>
                </div>

                <div content="森林草原火灾">
                  <img
                    src="@/assets/icons/dotpage/forest.png"
                    alt="森林草原火灾"
                    @click="getDetails(1)"
                  />
                  <p style="font-size:20px;">森林草原火灾</p>
                </div>
              </div>
              <div class="disasterStyle">
                <div style="padding-top: 30px">
                  <img
                    src="@/assets/icons/dotpage/snow.png"
                    style="margin-right: 100px"
                    alt="雪灾"
                    @click="getDetails(6)"
                  />
                  <p style="font-size:20px;margin-right: 100px">雪灾</p>
                </div>

                <div>
                  <img
                    src="@/assets/icons/dotpage/allRound.png"
                    style="height:220px;margin-right: 100px"
                    alt="综合风险"
                    @click="getDetails(7)"
                  />
                  <p style="font-size:20px;margin-right: 100px">综合风险</p>
                </div>
                <div style="padding-top: 30px">
                  <img
                    src="@/assets/icons/dotpage/drought.png"
                    alt="旱灾"
                    @click="getDetails(3)"
                  />
                  <p style="font-size:20px;">旱灾</p>
                </div>
              </div>
              <div class="disasterStyle">
                <div>
                  <img
                    src="@/assets/icons/dotpage/flood.png"
                    alt="洪涝"
                    style="margin-right: 200px"
                    @click="getDetails(2)"
                  />
                  <p style="font-size:20px;margin-right: 200px">洪涝</p>
                </div>

                <div>
                  <img
                    src="@/assets/icons/dotpage/geology.png"
                    alt="地质"
                    @click="getDetails(4)"
                  />
                  <p style="font-size:20px;">地质</p>
                </div>
              </div>
            </div>
          </div>
          

          
          <!-- <div class="tabel_footer_style">
            <Page
              :total="this.allNum"
              :current="pageNum"
              class="pageStyle"
              show-sizer
              show-elevator
              show-total
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
            />
          </div> -->
        </CCardBody>
        <CCardFooter class="footer"> </CCardFooter>
      </CCard>
    </div>
  </div>
</template>

<script>
import { thisExpression } from "@babel/types";

export default {
  name: "RegularRiskMonitor",
  data() {
    return {
      data: [],
      allDataList: [],
      currentPage: 1,
      pages: 0,
      total: 0,
      allNum: 0,
      pageNum: 1,
      pageSize: 10,
      name: "",
      getColumns: [
        //表头
        {
          type: "index",
          title: "序号",
          width: 80,
          align: "center",
        },
        {
          key: "name",
          title: "风险类型",
          align: "center",
          _style: "width:auto;background:rgba(241,244,249,1);",
        },
      ],
    };
  },
  computed: {},
  mounted() {
    this.getAuto();
  },
  methods: {
    //数据
    getAuto() {
      let self = this;
      self.data = [];
      let pageSize = this.pageSize;
      let path = this.$api.taskManageApi.riskTaskQuery;
      let param = {
        pageNum: this.pageNum,
        pageSize: pageSize,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.total = Math.ceil(res.data.data.count / self.pageSize);
          let dataList = [];
          for (let item of res.data.data) {
            let data = item;
            dataList.push({
              id: data.id,
              parentId: data.parentId,
              name: data.name,
              createTime: data.createTime,
              updataTime: data.updataTime,
              areas: data.areas,
              productType: data.productType,
            });
          }
          this.allDataList = dataList;
          this.allNum = this.allDataList.length;
          this.getPageData(this.allDataList);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    // 表格分页
    getPageData(AllData) {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      this.data = [];
      let beginIndex = (currentPage - 1) * pageSize;
      let lastIndex = currentPage * pageSize - 1; //9
      for (let i = beginIndex; i < AllData.length; i++) {
        let temp = AllData[i];

        if (i > lastIndex) break;
        this.data.push(temp);
      }

      this.allNum = AllData.length;
      this.total = Math.ceil(AllData.length / this.pageSize);
      for (let i = 0; i < AllData.length; i++) {
        if (i > lastIndex) break;
        this.data[i].number = (this.currentPage - 1) * this.pageSize + i + 1;
      }
    },
    // 页码改变
    pageChange(page) {
      this.pageNum = page;
      this.currentPage = page;
      this.getPageData(this.allDataList);
    },
    //每页条数
    pageSizeChange(pageSise) {
      this.pageSize = pageSise;
      this.getPageData(this.allDataList);
    },
    //详情跳转
    getDetails(code) {
      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].id === code) {
          let index = this.data[i];
          this.$router.push({
            path: "/detailTaskRegularRisk",
            query: {
              id: index.id,
              parentId: index.parentId,
              name: index.name,
            },
          });
        }
      }
    },
  },
  watch: {},
};
</script>


<!--css样式-->
<style scoped>
.headerFont {
  font-size: 20px;
}

.tabel_footer_style {
  width: 98%;
  border-top: 1px solid #dcdee2;
  background-color: #ffffff;
  height: 70px;
  z-index: 1000;
  position: absolute;
}

.card-body {
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 52px) !important;
}
.card-footer {
  background-image: url(/img/bo.png);
  width: 100%;
  height: 120px;
  background-repeat:no-repeat;
}
</style>
<style scoped>
.tempxyz .card-body {
  position: static;
  padding: 0 20px;
}

/deep/.form-control {
  padding: 0;
}
.pageStyle {
  position: absolute;
  right: 25px;
  margin-top: 15px;
}
.img {
  width: 80px;
  height: 80px;
}
.riskStyle {
  margin-top: 30px;
  margin-bottom: 80px;
  text-align: center;
}
.disasterStyle {
  display: flex;
  justify-content: center;
  font-weight: 700;
}
</style>
